<template>
	<view>
		<!-- 搜索栏 -->
		<view class=" flex align-center margin">
			<view class="flex search align-center padding-left">
				<text class="notis cuIcon-search text-gray"></text>
				<input type="text" value="" 
				placeholder="搜索菜谱"
				v-model="searchKeyword"
				@input="handleInput"
				@confirm="handleSearch"
				/>
			</view>		  
			<text class="notis cuIcon-notice text-gray"></text>
		</view>
		<!-- 添加搜索结果显示区域 -->
		<view v-if="showSearchResults" class="search-results">
		  <view class="list-tilte margin-left">搜索结果</view>
		  <scroll-view scroll-y class="search-results">
			<view class="recommend-grid margin-right">
			  <moreRecipe
				v-for="item in searchResulte"
				:key="item.objectId"
				:data="item"
				class="recommend-item"
				@click="handleDetail(item.objectId)"
			  ></moreRecipe>
			</view>
		  </scroll-view>
		</view>
		<view v-else>
			<!-- 轮播图 -->
			<swiper 
			:indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000"
			 class="swi-cont" v-if="Recipe.length >0">
				<swiper-item v-for="(item,index) in Recipe" key="index" @click="handleDetail(item.objectId)">
					<view class="swiper-item">
						<image :src="item.cover" mode="aspectFill"></image>
						<view class="re-tltle">
							{{item.name}}
						</view>
						<view class="cril flex justify-center align-center">
							<text class="cuIcon-like text-gray tubiao"></text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 热门食谱 -->
			<view class="margin-top">
				<view class="list-tilte margin-left">热门食谱</view>
				<scroll-view scroll-x>
					<view class="popular-list flex">
						<couHotRecipe 
						v-for="item in Recipe"
						:key="item.objectId"
						:data="item"
						@click="handleDetail(item.objectId)"
						></couHotRecipe>
					</view>
				</scroll-view>
			</view>
			<!-- 低卡优先 -->
			<view class="margin-top">
				<view class="list-tilte margin-left">低卡优先</view>
				<scroll-view scroll-x>
					<view class="popular-list flex">
						<couHotRecipe
						v-for="item in carories"
						:key="item.objectId"
						:data="item"
						@click="handleDetail(item.objectId)"
						></couHotRecipe>
					</view>
				</scroll-view>
			</view>
			<!-- 更多推荐 -->
			<view class="margin-top">
			  <view class="list-tilte margin-left ">更多推荐</view>
			  <scroll-view scroll-y class="recommend-scroll">
				<view class="recommend-grid margin-right">
				  <moreRecipe
					v-for="item in Recipe"
					:key="item.objectId"
					:data="item"
					class="recommend-item"
					@click="handleDetail(item.objectId)"
				  ></moreRecipe>
				</view>
			  </scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">	       
import { ref, type Ref } from 'vue';
import type {RecipeType} from '../../model/recipe'
import { onLoad } from '@dcloudio/uni-app';
import {getLowCarories, getRecipe, searchRecipe} from '../../api/recipe'
//获取菜谱
const Recipe=ref<RecipeType[]>([])
//获取热量低的
const carories=ref<RecipeType[]>([])
//搜索相关数据
const searchKeyword=ref('');
const searchResulte=ref<RecipeType[]>([])
const showSearchResults=ref(false)
let searchTimer:number | null=null

onLoad(async()=>{
	Recipe.value=await getRecipe()
	carories.value=await getLowCarories()
})
//点击跳转详情页
const handleDetail=(id:string)=>{
	uni.navigateTo({
		url:`/pages/home/detail?id=${id}`
	})
}
//处理搜索确认
const handleSearch=async()=>{
	if(!searchKeyword.value.trim()){
		showSearchResults.value=false;
		return
	}
	let res=await searchRecipe(searchKeyword.value);
	searchResulte.value=res;
	showSearchResults.value=true;
}
//处理搜索时间
const handleInput=()=>{
	if(searchTimer){
		clearTimeout(searchTimer)
	}
	searchTimer=setTimeout(()=>{
		handleSearch()
	},500)
}
//点击空白关闭搜索
const handleClickOutSide=()=>{
	if(showSearchResults.value){
		showSearchResults.value=false
	}
}
</script>

<style lang="scss">
page{
	background-color: #fff
}
.search{
	width: 650upx;
	height: 80upx;
	text-align: center;
	background-color: #f5f5f5;
	border-radius: 40upx;
}
.notis::before{
	font-size: 40upx;
}	   
/* 轮播图容器样式 */
.swi-cont{
	width: 100%;
	height: 902upx;
}
.swiper-item {
  position: relative;
  width: 648upx;
  height: 890upx;
  margin: 0 auto; /* 水平居中 */
  image{
	width: 648upx ;
	height: 902upx;  
	border-radius: 10upx;
  }
}
.re-tltle{
  position: absolute;
  top: 60upx;
  left: 40upx;
  font-family: 'SourceHanSansCN-Bold', 'Source Han Sans CN Bold', 'Source Han Sans CN';
  font-weight: 700;
  font-size: 64upx;
  color: #fff;
  z-index: 2;
  text-shadow: 0 2upx 4upx rgba(0,0,0,0.5);
}
.list-tilte{
	font-size: 44upx;
	color: #1A1A1A;
	font-weight: 500;
	font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
}
// 搜索结果
.search-results{
	height: 100%;
}
/* 更多推荐部分样式 */
.recommend-scroll {
  height: 800upx;
  padding: 0 8upx; /* 左右内边距 */
  box-sizing: border-box; /* 确保padding不增加总宽度 */
}

.recommend-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2upx; /* 统一间距 */
}
.cril{
	position: absolute;
	bottom: 20upx;
	left: 20upx;
	width: 80upx;
	height: 80upx;
	border-radius: 50%;
	background-color: #fff;
}
.tubiao::before{
	font-size: 40upx
}
</style>
